<template>
  <div class="main-container" style="width: 90%;margin:5%;">

    <el-alert
      style="margin-top: 50px;"
      title="未审核"
      :closable="false"
      type="info"
      v-if="insFormData.examineStatus==0"
      show-icon
    ></el-alert>

    <el-alert
      style="margin-top: 50px;"
      title="审核已通过"
      :closable="false"
      type="success"
      description="你的信息已通过审核"
      v-if="insFormData.examineStatus==3"
      show-icon
    ></el-alert>

    <el-alert
      style="margin-top: 50px;"
      title="审核中"
      :closable="false"
      description="等待管理员审核，一般需要1-2天"
      type="info"
      v-if="insFormData.examineStatus==1"
      show-icon
    >
    </el-alert>

    <el-alert
      style="margin-top: 50px;"
      title="审核未通过"
      :closable="false"
      type="error"
      :description="'原因：'+errorMsg"
      v-if="insFormData.examineStatus==2"
      show-icon
    >
    </el-alert>

    <el-form ref="insForm" :model="insFormData" :rules="rules" size="medium" label-width="100px">
      <el-row :gutter="120">
        <el-col style="margin: 30px 0;">
          <el-divider content-position="center">基本信息</el-divider>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="一卡通号" prop="insCartId">
            <el-input v-model="insFormData.insCartId" placeholder="请输入一卡通号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="姓名" prop="insName">
            <el-input v-model="insFormData.insName" placeholder="请输入姓名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="相片" prop="insPicture">
            <image-upload @input="handleInput" :value="insFormData.insPicture" ></image-upload>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="性别" prop="insGender">
            <el-select v-model="insFormData.insGender" placeholder="请输入性别" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in insGenderOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="职称" prop="insProfessor">
            <el-input v-model="insFormData.insProfessor" placeholder="请输入职称" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="职务" prop="insCommander">
            <el-input v-model="insFormData.insCommander" placeholder="请输入职务" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>

<!--        <el-col :sm="24" :lg="8">-->
<!--          <el-form-item label="专业名称" prop="insDirection">-->
<!--            <el-input v-model="insFormData.insMajor" placeholder="请输入专业名称" clearable-->
<!--                      :style="{width: '100%'}"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-col :sm="24" :lg="8">
          <el-form-item label="出生年月" prop="insBirth">
            <el-date-picker v-model="insFormData.insBirth" value-format="yyyy-MM-dd" clearable
                      :style="{width: '100%'}"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :sm="24" :lg="8">
          <el-form-item label="籍贯" prop="insNativePlace">
            <el-input v-model="insFormData.insNativePlace" placeholder="籍贯" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>

        <el-col :sm="24" :lg="8">
          <el-form-item label="政治面貌" prop="insPoliticalOutlook">
            <el-input v-model="insFormData.insPoliticalOutlook" placeholder="政治面貌" :style="{width: '100%'}">
<!--              <el-option :value="item.value" :label="item.label" v-for="item in politicalOutlookOptions"></el-option>-->
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :sm="24" :lg="8">
          <el-form-item label="学历" prop="insEducation">
            <el-input v-model="insFormData.insEducation" placeholder="学历" :style="{width: '100%'}">
<!--              <el-option :value="item.value" :label="item.label" v-for="item in educationOptions"></el-option>-->
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :sm="24" :lg="8">
          <el-form-item label="学位" prop="insAcademicDegree">
            <el-input v-model="insFormData.insAcademicDegree" placeholder="请输入学位" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :sm="24" :lg="8">
          <el-form-item label="手机号" prop="insMobile">
            <el-input v-model="insFormData.insMobile" placeholder="请输入手机号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="办公电话" prop="insPhone">
            <el-input v-model="insFormData.insPhone" placeholder="请输入办公电话" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="电子邮箱" prop="insEmail">
            <el-input v-model="insFormData.insEmail" placeholder="请输入电子邮箱" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >指导方向</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insDirection">
            <editor :upload-url="uploadUrl" v-model="insFormData.insDirection" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >教育与工作经历</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insExperience">
            <editor :upload-url="uploadUrl" v-model="insFormData.insExperience" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >讲授本科课程</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insTeachingUndergraduate">
            <editor :upload-url="uploadUrl" v-model="insFormData.insTeachingUndergraduate" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >讲授研究生课程</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insTeachingGraduate">
            <editor :upload-url="uploadUrl" v-model="insFormData.insTeachingGraduate" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>

<!--      <el-row style="margin:30px 0;">-->
<!--        <el-col>-->
<!--          <el-divider content-position="center" >学术著作</el-divider>-->
<!--        </el-col>-->
<!--        <el-col>-->
<!--          <el-form-item label-width="0" prop="insAcademicWorks">-->
<!--            <editor :upload-url="uploadUrl" v-model="insFormData.insAcademicWorks" :height="300">-->

<!--            </editor>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >出版专著/教材</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insPublishTextbook">
            <editor :upload-url="uploadUrl" v-model="insFormData.insPublishTextbook" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >在校研究生情况</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insTrainingGraduate">
            <editor :upload-url="uploadUrl" v-model="insFormData.insTrainingGraduate" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >毕业研究生情况</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insTrainingGraduated">
            <editor :upload-url="uploadUrl" v-model="insFormData.insTrainingGraduated" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >社会兼职</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insSocialAppointment">
            <editor :upload-url="uploadUrl" v-model="insFormData.insSocialAppointment" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >获奖情况</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insReward">
            <editor :upload-url="uploadUrl" v-model="insFormData.insReward" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >荣誉称号</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insHonor">
            <editor :upload-url="uploadUrl" v-model="insFormData.insHonor" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>




      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >发表论文信息</el-divider>
        </el-col>
      </el-row>



      <el-row>
          <el-col :sm="24" :lg="24">
             <editor :upload-url="uploadUrl" v-model="insFormData.insPapers" :height="300">

              </editor>
          </el-col>
      </el-row>

      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >研究项目信息</el-divider>
        </el-col>
      </el-row>
        <el-row>
      <el-col :sm="24" :lg="24">
        <editor :upload-url="uploadUrl" v-model="insFormData.insProjects" :height="300">

        </editor>
      </el-col>
      </el-row>


      <el-row style="margin:30px 0;">
        <el-col>
          <el-divider content-position="center" >其他信息</el-divider>
        </el-col>
        <el-col>
          <el-form-item label-width="0" prop="insOther">
            <editor :upload-url="uploadUrl" v-model="insFormData.insOther" :height="300">

            </editor>
          </el-form-item>
        </el-col>
      </el-row>
<!--      <el-button type="primary" @click="addProject" icon="el-icon-plus">添加项目</el-button>-->
      <!--<el-row :gutter="40" v-for="(project,index) in insFormData.insProjects"&gt;
        <el-col>
          <el-col>
            <el-divider content-position="center">{{index+1}}</el-divider>
          </el-col>
        </el-col>
        <el-col style="margin-bottom: 20px;">
          <el-button type="danger" icon="el-icon-minus" @click="removeProject(index)">移除</el-button>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="项目名" label-width="120px"  :rules="{required: true,message: '项目名',trigger: 'blur'}" :prop="`insProjects[${index}].name`">
            <el-input v-model="project.name" placeholder="项目名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="项目级别" label-width="120px" :rules="{required: true,message: '项目级别',trigger: 'blur'}" :prop="`insProjects[${index}].level`">
            <el-select v-model="project.level" placeholder="项目级别" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in levelOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="参与类型" label-width="120px" :rules="{required: true,message: '参与类型',trigger: 'blur'}" :prop="`insProjects[${index}].joinType`">
            <el-input v-model="project.joinType" placeholder="参与类型" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="项目开始时间" label-width="120px" :rules="{required: true,message: '项目开始时间',trigger: 'blur'}" :prop="`insProjects[${index}].startTime`">
            <el-date-picker v-model="project.startTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="项目开始时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label-width="120px" :rules="{required: true,message: '项目结束时间',trigger: 'blur'}" label="项目结束时间" :prop="`insProjects[${index}].endTime`">
            <el-date-picker v-model="project.endTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="项目结束时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :sm="24" :lg="8">
          <el-form-item label="项目经费" label-width="120px" :rules="{required: true,message: '项目经费',trigger: 'blur'}" :prop="`insProjects[${index}].funds`">
            <el-input v-model="project.funds" placeholder="项目经费" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :sm="24" :lg="24">
          <el-form-item label="项目详细信息" label-width="120px" :prop="`insProjects[${index}].funds`">

          </el-form-item>
        </el-col>
      </el-row>-->
<!--      <el-form-item size="large">-->

<!--      </el-form-item>-->
    </el-form>
    <el-row justify="center" type="flex">
        <el-button style="margin: 50px;" type="primary" @click="submitForm">提交审核</el-button>
        <el-button style="margin: 50px;" @click="previewVisible = true">预览</el-button>
        <el-button style="margin: 50px;" @click="resetForm">重置</el-button>
    </el-row>

    <el-dialog width="90%" title="预览信息" fullscreen :visible="previewVisible" @close="previewVisible = false">
      <instructor-info :ins-form-data="insFormData"></instructor-info>
    </el-dialog>

  </div>
</template>
<script>
  import {addInstructorDetail,getInstructorDetailByUserId} from "@/api/mentor/instructor"
  import {getInfo} from "@/api/login"
  import {getExamineMsg} from "../../../api/mentor/examine";
  import imageUpload from '../../../components/ImageUpload'
  import editor from '../../../components/Editor'
  import instructorInfo from '../../../components/InstructorInfo'
export default {
  components: {imageUpload,editor,instructorInfo},
  props: [],
  data() {
    return {
      insFormData: {
        insCartId: undefined,
        insName: undefined,
        insGender: undefined,
        insProfessor: undefined,
        insCommander: undefined,
        insMajor: undefined,
        insPicture: undefined,
        insMobile: undefined,
        insPhone: undefined,
        insEmail: undefined,
        insPapers:undefined,
        insProjects:undefined,
        insDirection:undefined,
        insExperience:undefined,
        insTeachingUndergraduate:undefined,
        insTeachingGraduate:undefined,
        insAcademicWorks:undefined,
        insPublishTextbook:undefined,
        insTrainingGraduate:undefined,
        insTrainingGraduated:undefined,
        insSocialAppointment:undefined,
        insReward:undefined,
        insHonor:undefined,
        insOther:undefined,

      },
      uploadUrl:process.env.VUE_APP_BASE_API+'/common/upload',
      rules: {
        insCartId: [{
          required: true,
          message: '请输入一卡通号',
          trigger: 'blur'
        }],
        insName: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }]
      },
      insGenderOptions: [{
        "label": "男",
        "value": 1
      }, {
        "label": "女",
        "value": 0
      }],
      errorMsg:'',
      previewVisible:false
    }
  },
  computed: {},
  watch: {},
  async created() {
    const info = await getInfo();

    const flag = this.checkUser(info.user);
    if (!flag) {
      this.$message.warning("本菜单只针对导师开放")
      await this.$router.push("/")
      return
    }

    this.userId = info.user.userId
    await this.getInstructorDetail()

    //未通过审核，获取原因
    if (this.insFormData.examineStatus==2){
      await this.getExamineMsg()
    }
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['insForm'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        this.insFormData.userId = this.userId
        const res = await addInstructorDetail(this.insFormData)
        // console.log(res)
        if (res.code!=200){
          return this.$message.error(res.msg)
        }
        this.$message.success("提交成功")
        this.$router.go(0)
      })
    },
    handleInput(url){
      this.insFormData.insPicture = url
    },
    resetForm() {
      this.$refs['insForm'].resetFields()
    },

    async getInstructorDetail() {
      const res = await getInstructorDetailByUserId(this.userId);
      this.insFormData = res.data
      // console.log(res)
    },
    checkUser(user){
      // console.log(user)
      for (let i = 0; i < user.roles.length; i++) {
        if (user.roles[i].roleKey=='instructor'){
          return true
        }
      }
      return false
    },
    //获取导师的审核消息 1研究生 2导师
    async getExamineMsg(){
      const res = await getExamineMsg(2,this.insFormData.insId)
      // console.log(res)
      this.errorMsg = res.data.message
    },
    //打开预览模式
    previewForm(){

    }

  }
}

</script>
<style scoped>



  .el-upload__tip {
  line-height: 1.2;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 200px;
  display: block;
  border: 1px solid #eee;
}

</style>
